<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>尚硅谷会员登录页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css" />
  </head>
  <body>
  <div id="app">
    <div id="login_header">
      <a href="../../index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div id="l_content">
        <span class="login_word">欢迎登录</span>
      </div>

      <div id="content">
        <div class="login_form">
          <div class="login_box">
            <div class="tit">
              <h1>尚硅谷会员</h1>
            </div>
            <div class="msg_cont">
              <b></b>
              <span class="errorMsg">请输入用户名和密码</span>
            </div>
            <div class="form">
              <form action="login_success.html">
                <label>用户名称：</label>
                <input
                  class="itxt"
                  type="text"
                  placeholder="请输入用户名"
                  autocomplete="off"
                  tabindex="1"
                  name="username"
                  id="username"
                  v-model="user.uname"
                />
                <br />
                <br />
                <label>用户密码：</label>
                <input
                  class="itxt"
                  type="password"
                  placeholder="请输入密码"
                  autocomplete="off"
                  tabindex="1"
                  name="password"
                  id="password"
                  v-model="user.pwd"
                />
                <br />
                <br />
                <input type="button" value="登录" id="sub_btn" @click="gologin"/>
              </form>
              <div class="tit">
                <a href="regist.html">立即注册</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </div>
  </body>
  <script src="../../js/axios-0.18.0.js"></script>
  <script src="../../js/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="../../element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
          user:{}
      },
      methods:{
        gologin(){
          var _this=this
          axios({
            method:'post',
            url:'http://localhost:8080/w9/user/loginByUser',
            data:_this.user
          }).then(res=>{
              if(res.data.code=='success'){
                  console.log(res.data.userName)
                  console.log(res.data.totalCount)
                  console.log("---------")
                  window.sessionStorage.setItem("userName",res.data.userName)
                  window.sessionStorage.setItem("totalCount",res.data.totalCount)

                 location.href='http://localhost:8080/w9/index.html'
              }else{
                this.user={}
                this.$message.error('用户名或密码错误，请重新输入');
              }
          })
        }
      }

    })
  </script>
</html>
